<template>
	<el-dialog v-model="dialog" title="用户明细" width="60%">
		<el-tabs v-model="activeName">
			<el-tab-pane label="用户信息" name="info">
				<el-descriptions class="margin-top" title="基本信息" :column="3" border>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户编号</div>
						</template>
						{{ state.userInfo.userNumber }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户头像</div>
						</template>
						<el-avatar :src="state.userInfo.avatarUrl"></el-avatar>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户手机号</div>
						</template>
						{{ state.userInfo.phone }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">用户昵称</div>
						</template>
						{{ state.userInfo.nickName }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">来源</div>
						</template>
						<dict-tag :options="user_source" :value="state.userInfo.userSource"></dict-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">所在省份</div>
						</template>
						{{ state.userInfo.province }}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">所在城市</div>
						</template>
						{{ state.userInfo.city }}
					</el-descriptions-item>
				</el-descriptions>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useDict } from '/@/utils/dict';
// 字典
const { user_source } = useDict('user_source');
const dialog = ref(false);
const activeName = ref('info');
const state = reactive({
	userInfo: {
		id: '',
		userNumber: '',
		avatarUrl: '',
		phone: '',
		nickName: '',
		userGrade: '',
		userSource: '',
		province: '',
		city: '',
		accountBalance: '',
		parentUserInfo: { avatarUrl: '', nickName: '' },
	},
});
const initPage = (userInfo: any) => {
	state.userInfo = userInfo;
	dialog.value = true;
	activeName.value = 'info';
};
defineExpose({
	initPage,
});
</script>
